import React from 'react';
import ProLayout from '@ant-design/pro-layout';
import { useIntl, connect, Link } from 'umi';
import { MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons';
import { menuDataList } from '@/utils';
import menuTitleList from '@/constants/menuTitleList';
import RightContent from '@/components/RightContent';
import img1 from '@/assets/images/subLogo.png';
import styles from './BasicLayout.less';
import logo from '@/assets/images/logo_title.jpg';

const BasicLayout = (props) => {
  const { dispatch, children, settings, collapsed } = props;
  const { formatMessage } = useIntl();
  const imgs = [img1];

  const handleMenuCollapse = (payload) => {
    if (dispatch) {
      dispatch({
        type: 'global/changeLayoutCollapsed',
        payload,
      });
    }
  };

  return (
    <ProLayout
      pageTitleRender={false}
      menuItemRender={(menuItemProps, defaultDom) => {
        if (menuItemProps.isUrl || !menuItemProps.path) {
          return defaultDom;
        }
        return <Link to={menuItemProps.path}>{defaultDom}</Link>;
      }}
      headerRender={(headerProps) => {
        const { menuData } = headerProps;
        return (
          <div className={styles.menudata}>
            <div
              className={styles.logo}
              style={{
                minWidth: `${!collapsed ? '208px' : '48px'}`,
              }}
            >
              <img
                style={{
                  width: `${!collapsed ? '208px' : '48px'}`,
                  height: '50px',
                }}
                src={logo}
                alt="logo"
              />
            </div>
            <div
              onClick={() => handleMenuCollapse(!collapsed)}
              style={{
                width: '50px',
                textAlign: 'center',
                fontSize: '18px',
              }}
            >
              <span>{collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}</span>
            </div>
            <div
              style={{
                display: 'flex',
                flex: 1,
              }}
            >
              <div
                style={{
                  display: 'flex',
                }}
              >
                {menuData?.map((i, k) => {
                  if (i.name) {
                    return (
                      <div
                        key={k}
                        className={styles.leftMenu}
                        style={{
                          background: '#e6f7ff',
                        }}
                      >
                        <div className={styles.menuLogo}>
                          <img
                            src={imgs[k]}
                            alt=""
                            style={{
                              width: '40px',
                            }}
                          />
                          <div className={styles.menuName}>{i.name}</div>
                        </div>
                      </div>
                    );
                  }
                })}
              </div>
            </div>
            <div
              style={{
                float: 'right',
                width: '135px',
                display: 'flex',
                justifyContent: 'space-around',
                alignItems: 'center',
                marginRight: '30px',
              }}
            >
              <RightContent />
            </div>
          </div>
        );
      }}
      collapsedButtonRender={false}
      pure={window.__POWERED_BY_QIANKUN__ ? true : false} // 是否删除掉所有的自带界面
      menuDataRender={() => menuDataList(menuTitleList, formatMessage)}
      {...props}
      {...settings}
    >
      {children}
    </ProLayout>
  );
};

export default connect(({ global, settings }) => ({
  collapsed: global.collapsed,
  settings,
}))(BasicLayout);
